<template>
	<n-modal
		v-model:show="showModal"
		preset="dialog"
		:closable="false"
		:show-icon="false"
		class="material-config"
		style="width: 922px; padding: 16px"
		@after-leave="closeMaterialConfig(false)"
	>
		<div class="material-config-close" @click="closeMaterialConfig(false)">
			<n-icon size="20">
				<CloseCircle />
			</n-icon>
		</div>
		<div class="material-config-title">素材要求设置</div>
		<div class="material-config-item">
			<div class="material-config-item-info-name">
				<div class="material-config-item-must">*&nbsp;</div>
				<div class="material-config-item-name">素材上传时间:</div>
			</div>
			{{ uploadDate[0] + ' ~ ' + uploadDate[1] }}
		</div>
		<n-divider dashed />
		<div v-for="(item, index) in MaterialSetItem" :key="index" class="material-config-item">
			<div
				v-for="(internalItem, internalIndex) in item"
				:key="internalIndex"
				class="material-config-item-info"
			>
				<div class="material-config-item-info-name">
					<div v-if="internalItem.must" class="material-config-item-must">*&nbsp;</div>
					<div class="material-config-item-name">{{ internalItem.text }}</div>
				</div>
				<div class="material-config-item-info-context">
					<div class="material-config-item-info-context-info">
						<div v-if="internalItem.radio" class="material-config-item-info-context-info-radia">
							<n-space>
								<n-radio
									:checked="formData[internalItem.radio] === 1"
									:disabled="
										(internalItem.bindValue === 'imgStock' && oldImageStock === 1) ||
										(internalItem.bindValue === 'videoStock' && oldVideoStock === 1)
									"
									@click="changeLimitStatus(internalItem.radio, internalItem.bindValue, 1)"
								>
									不限
								</n-radio>
								<n-radio
									:checked="formData[internalItem.radio] === 2"
									:disabled="
										(internalItem.bindValue === 'imgStock' && oldImageStock === 1) ||
										(internalItem.bindValue === 'videoStock' && oldVideoStock === 1)
									"
									@click="changeLimitStatus(internalItem.radio, internalItem.bindValue, 2)"
								>
									限量
								</n-radio>
							</n-space>
						</div>
						<div class="material-config-item-info-context-info-input">
							<n-input-number
								v-model:value="formData[internalItem.bindValue]"
								class="material-config-item-info-context-info-input-info"
								:placeholder="internalItem.default"
								:style="{ textAlign: internalItem.inputTextAlign }"
								:show-button="false"
								:min="0"
								:max="internalItem.max"
								:validator="internalItem.validatorNum === 0 ? validatorZero : validatorTwo"
								:disabled="formData[internalItem.radio] === 1"
							>
								<template v-if="internalItem.inputPrefix" #prefix>
									<span class="material-config-item-info-context-info-input-info-prefix">
										{{ internalItem.inputPrefix }}
									</span>
								</template>
							</n-input-number>
							<div
								v-if="internalItem.suffix"
								class="material-config-item-info-context-info-input-suffix"
							>
								{{ internalItem.suffix }}
							</div>
						</div>
					</div>
					<div v-if="internalItem.prompt" class="material-config-item-info-context-prompt">
						{{ internalItem.prompt }}
					</div>
				</div>
			</div>
		</div>
		<n-divider />
		<div class="material-config-bottom">
			<n-button @click="closeMaterialConfig(false)">取消</n-button>
			<n-button
				type="info"
				style="margin-left: 6px"
				:disabled="uploading"
				:loading="uploading"
				@click="commitInfo"
			>
				确定
			</n-button>
		</div>
	</n-modal>
</template>

<script>
import { CloseCircle } from '@vicons/ionicons5';
import { useMessage } from 'naive-ui';
import { getMaterialConfigDetail, updateMaterialConfig } from '../../../api/product';
import { cloneDeep } from 'lodash';
import dayjs from 'dayjs';

const formData = {
	id: undefined,
	productId: undefined,
	skuId: undefined,
	imgSalePrice: undefined,
	imgPlatformPercent: undefined,
	imgCreatorPercent: undefined,
	imgStockType: 1, //1不限制，2限制
	imgStock: undefined,
	imgMaxNumberType: 1,
	imgMaxNumber: undefined,
	imgMaxBuyType: 1,
	imgMaxBuy: undefined,
	imgMinBuy: undefined,
	videoSalePrice: undefined,
	videoPlatformPercent: undefined,
	videoCreatorPercent: undefined,
	videoStockType: 1,
	videoStock: undefined,
	videoMaxNumberType: 1,
	videoMaxNumber: undefined,
	videoMaxBuyType: 1,
	videoMaxBuy: undefined,
	videoMinBuy: undefined
};

const MaterialSetItem = [
	[
		{
			must: true,
			text: '照片素材定价：',
			inputPrefix: '￥',
			inputTextAlign: 'right',
			default: '0.00',
			validatorNum: 0,
			bindValue: 'imgSalePrice',
			suffix: '/个'
		},
		{
			must: true,
			text: '视频素材定价：',
			inputPrefix: '￥',
			inputTextAlign: 'right',
			default: '0.00',
			validatorNum: 0,
			bindValue: 'videoSalePrice',
			suffix: '/个'
		}
	],
	[
		{
			must: true,
			text: '平台收益：',
			inputPrefix: '',
			default: '请输入比例',
			validatorNum: 0,
			bindValue: 'imgPlatformPercent',
			suffix: '%',
			prompt: '图片售卖后平台所分得的价格比例',
			max: 100
		},
		{
			must: true,
			text: '平台收益：',
			type: 1,
			inputPrefix: '',
			default: '请输入比例',
			validatorNum: 0,
			bindValue: 'videoPlatformPercent',
			suffix: '%',
			prompt: '视频售卖后平台所分得的价格比例',
			max: 100
		}
	],
	[
		{
			must: true,
			text: '创作者收益：',
			inputPrefix: '',
			default: '请输入比例',
			validatorNum: 0,
			bindValue: 'imgCreatorPercent',
			suffix: '%',
			prompt: '图片售卖后创作者所分得的价格比例',
			min: 0,
			max: 100
		},
		{
			must: true,
			text: '创作者收益：',
			inputPrefix: '',
			default: '请输入比例',
			validatorNum: 0,
			bindValue: 'videoCreatorPercent',
			suffix: '%',
			prompt: '视频售卖后创作者所分得的价格比例',
			max: 100
		}
	],
	[
		{
			must: true,
			text: '照片下载次数：',
			radio: 'imgStockType',
			inputPrefix: '',
			default: '请输入',
			validatorNum: 0,
			bindValue: 'imgStock',
			prompt: '该产品照片可下单购买次数'
		},
		{
			must: true,
			text: '视频下载次数：',
			radio: 'videoStockType',
			inputPrefix: '',
			default: '请输入',
			validatorNum: 0,
			bindValue: 'videoStock',
			prompt: '该产品视频可下单购买次数'
		}
	],
	[
		{
			must: true,
			text: '产品照片上限：',
			radio: 'imgMaxNumberType',
			inputPrefix: '',
			default: '请输入',
			validatorNum: 0,
			bindValue: 'imgMaxNumber',
			prompt: '该产品保存的最大照片数量'
		},
		{
			must: true,
			text: '产品视频上限：',
			radio: 'videoMaxNumberType',
			inputPrefix: '',
			default: '请输入',
			validatorNum: 0,
			bindValue: 'videoMaxNumber',
			prompt: '该产品保存的最大视频数量'
		}
	],
	[
		{
			must: true,
			text: '单次最大购买：',
			radio: 'imgMaxBuyType',
			inputPrefix: '',
			default: '请输入',
			validatorNum: 0,
			bindValue: 'imgMaxBuy',
			prompt: '用户单次购买该产品照片的最大数量'
		},
		{
			must: true,
			text: '单次最大购买：',
			radio: 'videoMaxBuyType',
			inputPrefix: '',
			default: '请输入',
			validatorNum: 0,
			bindValue: 'videoMaxBuy',
			prompt: '用户单次购买该产品视频的最大数量'
		}
	],
	[
		{
			must: true,
			text: '单次最小购买：',
			inputPrefix: '',
			default: '请输入',
			validatorNum: 0,
			bindValue: 'imgMinBuy',
			prompt: '用户单次购买该产品照片的起始数量'
		},
		{
			must: true,
			text: '单次最小购买：',
			inputPrefix: '',
			default: '请输入',
			validatorNum: 0,
			bindValue: 'videoMinBuy',
			prompt: '用户单次购买该产品视频的起始数量'
		}
	]
];
export default {
	name: 'MaterialConfig',
	components: { CloseCircle },
	props: {},
	data() {
		return {
			MaterialSetItem,
			showModal: false,
			uploading: false,
			uploadDate: ['', ''],
			oldImageStock: 2,
			oldVideoStock: 2,
			formData,
			message: useMessage(),
			validatorZero: (x) => {
				const xIndex = String(x).indexOf('.');
				if (xIndex === -1) {
					return true;
				}
				return String(x).length - (xIndex + 1) <= 0;
			},
			validatorTwo: (x) => {
				const xIndex = String(x).indexOf('.');
				if (xIndex === -1) {
					return true;
				}
				return String(x).length - (xIndex + 1) <= 2;
			}
		};
	},
	watch: {
		'formData.imgPlatformPercent'(value, oldValue) {
			if (value !== null) {
				this.formData.imgCreatorPercent = (10000 - value * 100) / 100;
			} else {
				this.formData.imgCreatorPercent = null;
			}
		},
		'formData.imgCreatorPercent'(value, oldValue) {
			if (value !== null) {
				this.formData.imgPlatformPercent = (10000 - value * 100) / 100;
			} else {
				this.formData.imgPlatformPercent = null;
			}
		},
		'formData.videoPlatformPercent'(value, oldValue) {
			if (value !== null) {
				this.formData.videoCreatorPercent = (10000 - value * 100) / 100;
			} else {
				this.formData.videoCreatorPercent = null;
			}
		},
		'formData.videoCreatorPercent'(value, oldValue) {
			if (value !== null) {
				this.formData.videoPlatformPercent = (10000 - value * 100) / 100;
			} else {
				this.formData.videoPlatformPercent = null;
			}
		}
	},

	methods: {
		changeLimitStatus(radio, bindValue, status) {
			this.formData[bindValue] = null;
			this.formData[radio] = status;
		},
		openMaterialConfig(row) {
			this.showModal = true;
			this.formData.productId = row.productId;
			this.formData.skuId = row.skuId;
			const params = {
				productId: row.productId
			};
			getMaterialConfigDetail(params).then((res) => {
				const { code, data } = res;
				if (code === 200 && data) {
					if (data.imgStock === -999) {
						data.imgStockType = 1;
						this.oldImageStock = 1;
						data.imgStock = undefined;
					} else {
						data.imgStockType = 2;
					}
					if (data.videoStock === -999) {
						data.videoStockType = 1;
						this.oldVideoStock = 1;
						data.videoStock = undefined;
					} else {
						data.videoStockType = 2;
					}
					if (data.imgMaxNumber === -999) {
						data.imgMaxNumberType = 1;
						data.imgMaxNumber = undefined;
					} else {
						data.imgMaxNumberType = 2;
					}
					if (data.videoMaxNumber === -999) {
						data.videoMaxNumberType = 1;
						data.videoMaxNumber = undefined;
					} else {
						data.videoMaxNumberType = 2;
					}
					if (data.imgMaxBuy === -999) {
						data.imgMaxBuyType = 1;
						data.imgMaxBuy = undefined;
					} else {
						data.imgMaxBuyType = 2;
					}
					if (data.videoMaxBuy === -999) {
						data.videoMaxBuyType = 1;
						data.videoMaxBuy = undefined;
					} else {
						data.videoMaxBuyType = 2;
					}
					data.imgSalePrice = data.imgSalePrice / 100;
					data.videoSalePrice = data.videoSalePrice / 100;
					this.formData = data;
				}
				const uploadDate = [];
				uploadDate[0] = dayjs.unix(row.startDate).format('YYYY-MM-DD HH:mm:ss');
				uploadDate[1] = dayjs.unix(row.endDate).format('YYYY-MM-DD HH:mm:ss');
				this.uploadDate = uploadDate;
			});
		},
		closeMaterialConfig(refresh = true) {
			if (refresh) {
				this.$emit('refresh');
			}
			this.showModal = false;
			//数据初始化
			this.uploadDate = ['', ''];
			this.uploading = false;
			this.oldImageStock = 2;
			this.oldVideoStock = 2;
			this.formData = {
				imgSalePrice: undefined,
				imgPlatformPercent: null,
				imgCreatorPercent: null,
				imgStockType: 1, //1不限制，2限制
				imgStock: undefined,
				imgMaxNumberType: 1,
				imgMaxNumber: undefined,
				imgMaxBuyType: 1,
				imgMaxBuy: undefined,
				imgMinBuy: undefined,
				videoSalePrice: undefined,
				videoPlatformPercent: null,
				videoCreatorPercent: null,
				videoStockType: 1,
				videoStock: undefined,
				videoMaxNumberType: 1,
				videoMaxNumber: undefined,
				videoMaxBuyType: 1,
				videoMaxBuy: undefined,
				videoMinBuy: undefined
			};
		},
		commitInfo() {
			const {
				formData: {
					imgSalePrice = -1,
					imgPlatformPercent = -1,
					imgCreatorPercent = -1,
					imgStockType = 1,
					imgStock = -1,
					imgMaxNumberType = 1,
					imgMaxNumber = -1,
					imgMaxBuyType = 1,
					imgMaxBuy = -1,
					imgMinBuy = -1,
					videoSalePrice = -1,
					videoPlatformPercent = -1,
					videoCreatorPercent = -1,
					videoStockType = 1,
					videoStock = -1,
					videoMaxNumberType = 1,
					videoMaxNumber = -1,
					videoMaxBuyType = 1,
					videoMaxBuy = -1,
					videoMinBuy = -1
				},
				uploadDate
			} = this;
			if (!uploadDate) {
				this.message.error('素材上传时间不能为空！');
				return;
			}
			if (imgSalePrice < 0) {
				this.message.error('请正确输入照片素材定价！');
				return;
			}
			if (videoSalePrice < 0) {
				this.message.error('请正确输入视频素材定价！');
				return;
			}
			if (
				imgPlatformPercent === null ||
				imgCreatorPercent === null ||
				videoPlatformPercent === null ||
				videoCreatorPercent === null ||
				imgPlatformPercent < 0 ||
				imgCreatorPercent < 0 ||
				videoPlatformPercent < 0 ||
				videoCreatorPercent < 0 ||
				imgPlatformPercent > 100 ||
				imgCreatorPercent > 100 ||
				videoPlatformPercent > 100 ||
				videoCreatorPercent > 100
			) {
				this.message.error('请正确输入照片/视频平台和创作者收益！');
				return;
			}
			if (imgStockType !== 1 && imgStock <= 0) {
				this.message.error('限量照片下载次数请输入正确的下载量！');
				return;
			}
			if (videoStockType !== 1 && videoStock <= 0) {
				this.message.error('限量视频下载次数请输入正确的下载量！');
				return;
			}
			if (imgMaxNumberType !== 1 && imgMaxNumber < 3) {
				this.message.error('限量产品照片上限最少3张！');
				return;
			}
			if (videoMaxNumberType !== 1 && videoMaxNumber < 3) {
				this.message.error('限量产品视频上限最少3个！');
				return;
			}
			if (imgMaxBuyType !== 1 && imgMaxBuy <= 0) {
				this.message.error('限量照片单次购买数请输入正确的最大购买数！');
				return;
			}
			if (videoMaxBuyType !== 1 && videoMaxBuy <= 0) {
				this.message.error('限量视频单次购买数请输入正确的最大购买数！');
				return;
			}
			if (imgMinBuy <= 0 || videoMinBuy <= 0) {
				this.message.error('请正确输入照片/视频单次购买最小购买数！');
				return;
			} else {
				if (imgMaxBuyType !== 1 && imgMaxBuy < imgMinBuy) {
					this.message.error('照片的最小购买数不能大于最大购买数！');
					return;
				}
				if (videoMaxBuyType !== 1 && videoMaxBuy < videoMinBuy) {
					this.message.error('视频的最小购买数不能大于最大购买数！');
					return;
				}
			}
			this.uploading = true;
			const params = cloneDeep(this.formData);
			params.upResourceStartTime = uploadDate[0];
			params.upResourceStartTime = uploadDate[0];
			params.upResourceEndTime = uploadDate[1];
			params.imgSalePrice = imgSalePrice * 100;
			params.videoSalePrice = videoSalePrice * 100;
			if (imgStockType === 1) {
				params.imgStock = -999;
			}
			if (videoStockType === 1) {
				params.videoStock = -999;
			}
			if (imgMaxNumberType === 1) {
				params.imgMaxNumber = -999;
			}
			if (videoMaxNumberType === 1) {
				params.videoMaxNumber = -999;
			}
			if (imgMaxBuyType === 1) {
				params.imgMaxBuy = -999;
			}
			if (videoMaxBuyType === 1) {
				params.videoMaxBuy = -999;
			}
			updateMaterialConfig(params)
				.then((res) => {
					const { code, message } = res;
					if (code === 200) {
						this.message.success('保存成功！');
						this.closeMaterialConfig();
					} else {
						this.message.error(message);
					}
					this.uploading = false;
				})
				.catch((error) => {
					this.message.error('请确认参数是否正确');
					this.uploading = false;
				});
		}
	}
};
</script>

<style lang="less" scoped>
.material-config {
	position: relative;
	&-close {
		position: absolute;
		top: -16px;
		right: -6px;
		cursor: pointer;
	}
	&-title {
		margin-bottom: 19px;
		font-size: 18px;
		font-weight: 500;
		color: #333333;
		&-icon {
			text-align: right;
		}
	}
	&-item {
		display: flex;
		text-align: center;
		justify-content: flex-start;
		line-height: 32px;
		font-size: 14px;
		font-weight: 400;
		color: #000000;
		margin-bottom: 14px;
		&-must {
			color: #f55f4e;
		}
		&-name {
			text-align: left;
		}
		&-info {
			display: flex;
			text-align: center;
			width: 50%;
			&-name {
				width: 110px;
				display: flex;
				text-align: center;
			}
			&-context {
				&-info {
					display: flex;
					align-items: center;
					&-input {
						display: flex;
						&-info {
							width: 120px;
							text-align: left;
							&-prefix {
								font-size: 13px;
								font-weight: 400;
								color: #999999;
							}
						}
						&-suffix {
							margin-left: 6px;
						}
					}
				}
				&-prompt {
					height: 23px;
					padding-top: 6px;
					font-size: 12px;
					font-weight: 400;
					color: #f5894e;
					text-align: left;
					line-height: 12px;
				}
			}
		}
	}
	&-bottom {
		text-align: right;
	}
}
</style>
